// 引入Vue
import Vue from "vue";
// 引入router
import VueRouter from "vue-router";

// import命令必须在其他所有的代码的上面
// import Hot from "../views/HotView.vue";
// import Cinema from "../views/CinemaView.vue";
// import Wait from "../views/WaitView.vue";

// 插件要使用use方法，意味着vue-router是vue的一个插件
Vue.use(VueRouter);

// 创建一个路由表
// vue的路由默认使用排他性路由(只要匹配到一个就不会再匹配了)，react的路由是包容性路由
const routes = [
  // 重定向
  {
    path: "/",
    redirect: "/hot",
  },
  {
    path: "/hot",
    component: () => import("../views/HotView.vue"),
    // children属性用于做路由嵌套
    children: [
      {
        path: "/hot",
        redirect: "/hot/hot1",
      },
      {
        path: "/hot/hot1",
        component: () => import("../views/HotView1.vue"),
      },
      {
        path: "/hot/hot2",
        component: () => import("../views/HotView2.vue"),
      },
    ],
  },
  {
    path: "/cinema",
    // 路由别名
    alias: "/abc",
    // import函数可以做文件的异步引入
    component: () => import("../views/CinemaView.vue"),
  },
  {
    path: "/wait",
    name: "wait",
    // component: () => import("../views/WaitView.vue"),
    // 命名视图
    components: {
      a: () => import("../views/WaitView.vue"),
      b: () => import("../views/WaitView2.vue"),
    },
  },
  {
    path: "/detail/:id",
    component: () => import("../views/DetailView.vue"),
  },
  // 404页面，一定要写在路由表的最后面
  {
    path: "*",
    component: () => import("../views/NotFound.vue"),
  },
];

// 创建一个路由实例
const router = new VueRouter({
  routes,
});

// 将路由实例进行暴露
export default router;
